<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>sysNote</title>

    <script src="./jquery/dist/jquery.min.js"></script>
    <script src="./popper.js/dist/umd/popper.min.js"></script>


    <link rel="stylesheet" href="./bootstrap/dist/css/bootstrap.min.css">


    <script src="./bootstrap/dist/js/bootstrap.min.js"></script>



    <link rel="stylesheet" href="./summernote/dist/summernote-bs4.css">
    <script src="./summernote/dist/summernote-bs4.js"></script>
    <!--<script src="./summernote/dist/lang/summernote-zh-CN.min.js"></script>-->



    <script src="./vue/dist/vue.min.js"></script>
    <script src="./moment/moment.js"></script>
    <script src="./moment/locale/zh-cn.js"></script>
</head>

<body>

    <div class="container" style="margin: 20px auto;" id="sysNoteApp">

        <button type="button" class="btn btn-primary" @click="fnShowSysNoteModal">add</button>

        <button type="button" class="btn btn-link" @click="fnUp">上一页</button>
        <button type="button" class="btn btn-link" @click="fnDown">下一页</button>

        <div class="card" style="margin-top: 20px;">
            <img class="card-img-top" src="./blue.jpg" style="height: 50px;">
            <div class="card-body">


                <template v-for="(item, index) in dataList" :key="index">

                    <button type="button" @click="showNoteItem(item)" class="btn btn-link">{{item.sysDate}}</button>
                </template>


                <br />
                <button type="button" @click="showNoteItemModal()" class="btn btn-success">Add item</button>
                <table class="table table-responsive-sm">
                    <tbody class="w-100">

                        <tr class="row mx-0" v-for="(item, index) in sysNoteItemList">
                            <td class="col-5">{{item.timeTitle}}</td>
                            <td class="col-5">
                                <div>{{item.timeNote}}</div>
                            </td>
                        </tr>

                    </tbody>
                </table>

            </div>
        </div>





        <!-- 模态框 -->
        <div class="modal fade" id="sysNoteModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">操作</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">

                        <form>

                            <div class="form-group">
                                <label for="">日期</label>
                                <input type="date" class="form-control" v-model="sysNoteForm.sysDate">
                            </div>


                        </form>
                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" @click="fnSave">确定</button>
                    </div>

                </div>
            </div>
        </div>


        <!-- 模态框 -->
        <div class="modal fade" id="sysNoteItemModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">操作</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">


                        <form>

                            <div class="form-group">
                                <label for="">time</label>
                                <select class="form-control" v-model="sysNoteItemForm.timeTitle">
                                    <option :value="'time' + opt" v-for="(opt,index) in timeList" :key="index">
                                        time-{{opt}}</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="">内容</label>
                                <textarea class="form-control" v-model="sysNoteItemForm.timeNote" rows="3"></textarea>
                            </div>


                        </form>
                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" @click="fnSaveItem">确定</button>
                    </div>

                </div>
            </div>
        </div>



    </div>


</body>

</html>


<script>


    var vm = new Vue({
        el: '#sysNoteApp',
        data: {

            pageNum: 0,
            sysNoteForm: {

            },

            timeList: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10",
                "11", "12", "13", "14", "15", "16", "17", "18", "19", "20",
                "21", "22", "23"],


            sysNoteItemForm: {

                sysNote: { sid: '' }
            },

            dataList: [],
            sysNoteItemList: [],

        },


        filters: {

            fmtDate(date) {
                return date + moment(date).format('dddd');
            }
        },


        methods: {


            //上一页
            fnUp() {
                this.pageNum--;
                if (this.pageNum < 0) {
                    this.pageNum = 0;
                }
                this.querySysNote();
            },

            //下一页
            fnDown() {

                this.pageNum++;
                if (this.pageNum > 100) {
                    this.pageNum = 100;
                }

                this.querySysNote();
            },

            getQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },


            // 新增 modal
            fnShowSysNoteModal() {

                $('#sysNoteModal').modal('show');
            },


            //修改 modal
            fnShowUpdateModal(item) {
                this.sysNoteForm = item;
                $('#sysNoteModal').modal('show');
            },

            //查看具体的note
            showNoteItem(item) {

                this.sysNoteItemForm.sysNote = item;

                var noteId = item.sid;
               this.querySysNoteItems(noteId);

            },


            showNoteItemModal() {

                if(!this.sysNoteItemForm.sysNote.sid){
                    alert('请选择日期');
                    return false;
                }
                //console.log(this.selectNote);
                $('#sysNoteItemModal').modal('show');
            },



            //修改 item
            fnSave() {


                if (!this.sysNoteForm.sysDate) {
                    alert('日期不能为空');
                    return false;
                }


                var _self = this;

                var postUrl = '/sysNotes';
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: JSON.stringify(_self.sysNoteForm),
                    dataType: "json",
                    contentType: 'application/json',
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            $('#sysNoteModal').modal('hide');
                            _self.sysNoteForm = {};
                            _self.querySysNote();
                        }

                    }
                });
            },


            fnSaveItem() {




                var _self = this;
                var noteId = _self.sysNoteItemForm.sysNote.sid;

                var postUrl = '/sysNotes/items';
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: JSON.stringify(_self.sysNoteItemForm),
                    dataType: "json",
                    contentType: 'application/json',
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            $('#sysNoteItemModal').modal('hide');
                            _self.sysNoteItemForm = {
                                sysNote: {
                                    sid: noteId,
                                }
                            };
                            _self.querySysNoteItems(noteId);
                        }

                    }
                });
            },



            // 查询 cate
            querySysNote() {

                var _self = this;

                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "./sysNotes?page=" + this.pageNum + "&sort=sysDate,desc",
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {

                            _self.dataList = response.dat.content;
                        }

                    }
                });
            },

            //查看某一天的 noteItems
            querySysNoteItems(noteId) {

                var _self = this;

                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "./sysNotes/" + noteId + "/items",
                    // data: "data",
                    dataType: "json",
                    success: function (response) {
                        // console.log(response);
                        if (response.code == 0) {
                            _self.sysNoteItemList = response.dat;
                        }

                    }
                });
            },


        },
        mounted() {

            this.querySysNote();
        }
    })


</script>